<template>
  <basic-container>
    <div id="withdrawal">
      <h3>提现信息</h3>
      <!-- <el-date-picker
        v-model="value3"
        type="datetime"
        placeholder="选择日期时间"
      >
      </el-date-picker>-->
      <el-select
        style="margin-left: 10px"
        filterable
        v-model="shopnamevalue"
        placeholder="请选择操作人"
        clearable
        @change="storeaccess"
      >
        <el-option
          v-for="item in shopkeeper"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-select
        @change="screen"
        style="margin-left: 10px"
        filterable
        v-model="statevalue"
        placeholder="请选择提现状态"
        clearable
      >
        <el-option
          v-for="item in consumTypeId"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <avue-crud
        ref="crud"
        :option="option"
        :data="data"
        :page="page"
      ></avue-crud>
    </div>
  </basic-container>
</template>

<script>
import $ from "jquery"
// let baseUrl = "http://192.168.0.220:8091";
let baseUrl = "http://122.51.69.142:8091"; //服务器地址
var dicDatas = {
  face: [], //分类下拉框
  list: [],
  shares: [],

  consumTypeId: [
    {
      label: "已通过",
      value: 1,
    },
    {
      label: "未通过",
      value: 2,
    },
  ],
  method: [],
};

export default {
  data() {
    return {
      value3: "",
      data: [],
      page: {
        total: 0,
        layout: "total,pager,prev, next",
        background: false,
        pageNum: 1,
        pageSize: 50,
      },
      option: {
        addBtn: false,
        menu: false,
        align: "center",
        menuAlign: "center",
        dialogClickModal:false,
        column: [
          {
            label: "提交日期",
            prop: "submitTime",
          },
          {
            label: "操作人",
            prop: "name",
          },
          {
            label: "提现金额(分)",
            prop: "money",
          },
          {
            label: "原有金额(分)",
            prop: "startMoney",
          },
          {
            label: "提现后金额(分)",
            prop: "endMoney",
          },
          {
            label: "提现渠道",
            prop: "bankOfDeposit",
          },
          {
            label: "卡号",
            prop: "cardNo",
          },
          {
            label: "提现状态",
            prop: "state",
            type: "select",
            dicData: dicDatas.consumTypeId,
          },
        ],
      },
      consumTypeId: [
        {
          label: "已通过",
          value: 1,
        },
        {
          label: "未通过",
          value: 2,
        },
      ],
      statevalue: "",
      shopkeeper: [], //店主名称下拉框
      shopnamevalue: "", //店主名称选中数据
      tableSelectList: [], // 选中的数据
    };
  },
  mounted() {
    this.getDataList();
    this.shop();
    // this.keeper();
  },
  methods: {
    getDataList() {
      let _this = this;
      _this.$ajax
        .post(`${baseUrl}/pc/getWithdrawRecordList`, {
          pageNum: _this.page.pageNum,
          pageSize: _this.page.pageSize,
        })
        .then(function (res) {
          //请求成功
          let resData = res.data;
          if (resData.code == 200) {
            _this.page.total = resData.data.count;
            _this.data = resData.data.withdrawRecordList;
              $(".avue-crud__pagination").css("display", "block");
          } else {
              _this.data = [];
              $(".avue-crud__pagination").css("display", "none");
            _this.$message.error(resData.msg);
          }
        })
        .catch(function (error) {
          //请求失败
          console.log(error);
        });
    },
    rowCell(row, index) {
      this.$refs.crud.rowCell(row, index);
    },
    // 新增
    rowSave(form, done) {
      this.$message.success("新增数据" + JSON.stringify(form));
      done();
    },
    // 修改
    rowUpdate(form, index, done) {
      this.$message.success(
        "编辑数据" + JSON.stringify(form) + "数据序号" + index
      );
      done();
    },
    handleRowClick(row) {
      this.$message({
        showClose: true,
        message: "序号" + row.$index,
        type: "success",
      });
    },
    //导出按钮
    openSelExcel(st) {
      let _this = this;
      if (st == 1) {
        if (_this.tableSelectList.length === 0) {
          _this.$message({
            message: "请至少选择一条需要导出的数据",
            type: "warning",
          });
          return;
        }
        _this
          .$confirm("该操作将导出选中的数据，是否继续", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            //导出
            let excelList = _this.tableSelectList;
            console.log(excelList);
            _this.openExcel(excelList);
          })
          .catch(() => {});
      } else {
        _this
          .$confirm("该操作将导出表格中的数据，是否继续", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            //导出

            let excelList = _this.data;
            console.log(excelList);
            _this.openExcel(excelList);
          })
          .catch(() => {});
      }
    },
    // 获取店主名称
    shop() {
      let _this = this;
      _this.$ajax
        .post(`${baseUrl}/pc/getShopUserList`)
        .then(function (res) {
          //请求成功
          // console.log(res);
          let resData = res.data;
          if (resData.code == 200) {
            resData.data.forEach((item) => {
              _this.shopkeeper.push({
                value: item.id,
                label: item.name,
              });
            });
          } else {
            _this.$message.error(resData.msg);
          }
        })
        .catch(function (error) {
          //请求失败
          console.log(error);
        });
    },
    // 操作人下拉框
    storeaccess() {
      let _this = this;
      if (_this.shopnamevalue == "") {
        _this.getDataList();
      } else {
        _this.$ajax
          .post(`${baseUrl}/pc/getWithdrawRecordList`, {
            shopUserId: _this.shopnamevalue,
            pageNum: _this.page.pageNum,
            pageSize: _this.page.pageSize,
          })
          .then(function (res) {
            //请求成功
            let resData = res.data;
            if (resData.code == 200) {
              $(".avue-crud__pagination").css("display", "inline-block");
              _this.page.total = resData.data.count;
              _this.data = resData.data.withdrawRecordList;
            } else {
              _this.data = [];
              $(".avue-crud__pagination").css("display", "none");
              _this.$message.error(resData.msg);
            }
          })
          .catch(function (error) {
            //请求失败
            console.log(error);
          });
      }
    },
    screen() {
      let _this = this;
      _this.$ajax
        .post(`${baseUrl}/pc/getWithdrawRecordList`, {
          state: _this.statevalue,
          pageNum: _this.page.pageNum,
          pageSize: _this.page.pageSize,
        })
        .then(function (res) {
          //请求成功
          let resData = res.data;
          if (resData.code == 200) {
            $(".avue-crud__pagination").css("display", "block");
            _this.page.total = resData.data.count;
            _this.data = resData.data.withdrawRecordList;
          } else {
            _this.data = [];
            $(".avue-crud__pagination").css("display", "none");
            _this.$message.error(resData.msg);
          }
        })
        .catch(function (error) {
          //请求失败
          console.log(error);
        });
    },
  },
};
</script>

<style>
#withdrawal h3 {
  margin: 20px 0;
}
</style>